<template>
  <div>
    <el-input placeholder="请商家关联名称" v-model="params.name" class="input-with-select" size="small">
      <el-button slot="append" icon="el-icon-search" @click="$refs.pagination.handleSizeChange(10)"></el-button>
    </el-input>
    <div style="position: relative">
      <el-table :data="tableData.list" stripe style="width: 100%">
        <el-table-column type="index" label="编号" min-width="40" align="center"></el-table-column>
        <el-table-column prop="name" label="商家名称" min-width="120" align="center"></el-table-column>
        <el-table-column prop="agentname" label="所属区域" min-width="120" align="center"></el-table-column>
        <el-table-column prop="createtime" label="创建时间" min-width="160" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="80">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" size="mini">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
       <pt-table-loading v-show="isloading" />
      <pt-pagination ref="pagination" :size="{pageSize: 10, pageSizes: [10, 20, 50]}" :total="tableData.total" @listeningEvent="triggerEvent" />
    </div>
  </div>
</template>

<script>
  import { selectBusiness } from '@/api/com'
  export default {
    props: { agentid: '' }, // 接收一个由父级组件传递过来的值
    data() {
      return {
        params: { // 查询数据
          page: 0,
          size: 10,
          name: '',
        },
        isloading: false,
        tableData: {}
      }
    },
    watch: {
      agentid(newValue, oldValue) {
        this.$refs.pagination.handleSizeChange(10)
      }
    }, 
    methods: {
      handleClick(row) {   //确认选择
        let name = row.name
        let id = row.id
        let data = {name, id}
        this.$emit('listenToShop', data)
      },
      triggerEvent(type,val) { // 分页器
        if (type === 'page') {
          this.params.page = val - 1
        } else if (type === 'size') {
          this.params.page = 0
          this.params.size = val
        }
        this.getTableList()
      },
      getTableList() { //获取订单数据
        this.isloading = true
        const params = {...this.params}
        params.agentid = this.agentid
        selectBusiness(params).then(res => {
          if (res.success) {
            this.tableData = res.data
          }
        }).finally(() => { this.isloading = false })
      }
    },
    mounted() {
      this.getTableList()
    },
  }
</script>

<style scoped>
  .cutbtns {
    height: 40px;
    padding: 0 15px;
    background: #fff;
  }

  .cutbtns span {
    width: 80px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    margin-left: 15px;
    border-bottom: 2px solid #fff;
  }

  .cutbtns span:hover {
    cursor: pointer;
  }

  .cutbtns .cur {
    font-weight: 600;
    border-bottom: 2px solid #f56c6c;
  }
</style>
